<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    
</head>
<body>
    <button onclick="getComputer()">发送请求</button>
    <button onclick="cancelHandler()">取消请求</button>
    
    <script>
        /**
         *  axios: 
         * 1. 对象式 函数式发送请求 [config]
         * 
         * 
         * 2. axios的基础配置
         *      2-1. defaults 配置
         *      2-2. axios.create 配置
         * 3. 拦截器：
         *      3-1. 请求拦截器
         *          1. 发送一些公共的参数[一般通过请求头headers携带 (token)]
         * 
         *      3-2. 响应拦截器
         *          1. 简化响应数据
         *          2. 权限验证[token]
         * 
         */
        let cancel = null
        function cancelHandler(){
            cancel && cancel()
        }
        function getComputer(){
            // 发送ajax请求
            // 1. 函数式
            axios({
                method:'get',
                url:'http://localhost:3000/computer',
                params:{ // 查询字符串参数
                    a:1,
                    b:2
                },
                headers:{ // 此处的参数，会出现在请求头对象中
                    z:100,
                    y:200
                },
                timeout:20000, // 超时时间
                cancelToken: new axios.CancelToken((c)=>{ // 手动取消请求
                    cancel = c
                })

            }).then(data=>{
                console.log('data', data.data)
            })
        }


    </script>
</body>
</html>